<!--
 @description  订单详情
 @fileName Detail.vue
 @author zengqiongying
 @created 2021/07/10 13:09:41
-->
<template>
  <div class="orderDialog">
    <ContentWrap>
      <div class="tab-main">
        <!-- <div v-if="showSetting" class="btn-setting-table">
          <el-button size="mini" @click="handleSettingTable">
            <svg-icon icon-class="shezhi-line" /> 表格设置
          </el-button>
        </div> -->
        <el-tabs v-model="activeTab" type="card" @tab-click="handleClick">
          <el-tab-pane
            v-for="(item,index) in tabs"
            :key="index"
            :label="item.title"
            :name="item.name"
          >
            <component :is="item.name" v-if="detailData && detailData.id" ref="refChild" :order-data="detailData" :order-id="detailData.id" :dict-data="dictData" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import baseInfo from './components/BaseInfo'
import goods from './components/GoodsList'
import product from './components/ProductList'
import linkOrder from './components/LinkOrder'
// import log from './components/LogList'
import log from '../compoment/logsDetail'
import commentInfo from './components/CommentInfo'
import trackInfo from './components/TrackInfo'
import evaluation from './components/Evaluation'
import exception from './components/ExceptionList'
import platformInfo from './components/PlatformInfo'
import { fetchOrderDetail } from '@/api/mscInfo'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'ECOGoodsDetail',
  components: { ContentWrap, baseInfo, goods, product, linkOrder, log, commentInfo, trackInfo, evaluation, exception, platformInfo },
  props: {
    // orderId: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      activeTab: 'baseInfo',
      tabs: [
        { name: 'baseInfo', title: '订单信息' },
        { name: 'goods', title: '商品信息' },
        { name: 'product', title: '产品信息' },
        { name: 'linkOrder', title: '关联订单' },
        { name: 'log', title: '操作日志' },
        { name: 'commentInfo', title: '备注信息' },
        { name: 'trackInfo', title: '订单跟踪' },
        { name: 'exception', title: '异常信息' },
        { name: 'evaluation', title: '评价信息' }
      ],
      detailData: '',
      dictData: ''
    }
  },
  computed: {
    showSetting() {
      return this.activeTab === 'goods' || this.activeTab === 'product'
    }
  },
  watch: {
    // orderId(val, oldVal) {
    //   this.initData()
    // }
  },
  async created() {
    await this.getDictLov()
    this.initData()
  },
  methods: {
    initData() {
      const { id } = this.$route.query
      fetchOrderDetail(id).then(res => {
        this.detailData = res.data || ''
      })
    },
    handleSettingTable() {
      const index = this.tabs.findIndex(v => v.name === this.activeTab)
      if (index > -1) {
        this.$nextTick(() => {
          this.$refs.refChild[index] && this.$refs.refChild[index].settingTable()
        })
      }
    },
    /**
     * tabs标签页切换
     */
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    // 查询缓存数据字典值列表
    async getDictLov() {
      const typeCode = ['ORDER_TYPE', 'STATE', 'DC_ORDER_STATUS', 'EX_TYPE', 'SEND_STATUS', 'LOGISTICS_MODE', 'SERVICE_MODE', 'SETTLE_STATUS', 'ORDER_SOURCE', 'RETURN_STATUS', 'RECIEVE_STATUS']
      this.dictData = await getDictByPatchType('eco', typeCode)
    }
  }
}

</script>
<style lang='scss' scoped>
.orderDialog {
  width: 100%;
  height: 100%;
  .content-wrap {
    widows: 100%;
    height: 100%;
    background: #FFFFFF;
  }
}

.tab-main{
  position:relative;
  .btn-setting-table{
    position:absolute;
    right: 5px;
    top: 6px;
    z-index:9
  }
}

</style>
